<template>
	<view class="app-price-title-share">
		<text class="app-name">{{title}}</text>
		<view v-if="subtitle" class="app-subtitle">
			<!-- <view class="t-omit-three">{{subtitle}}</view> -->
			<view class="t-omit-three">去实体店体验</view>
		</view>
		<view class="app-price-content dir-left-nowrap">
			<view class="app-price">
				<view class="app-pname" v-for="(item,index) in groups[0].attr" :key="index" v-if="isabuy">
					<view class="app-block app-tname">
						<text>{{item.attr_list[0].attr_name}}</text>
					</view>
					<view class="app-tprice">
						<view class="app-block app-deposit" style="width: 184rpx;color: #FA5151;">
							<text class="text">定金￥</text>{{item.price}}
						</view>
						<!-- app-full 10.25 修改 -->
						<view class="app-block app-market" style="width: 184rpx;color: #FA5151;">
							<text class="text">全款￥</text>{{item.original_price}}
						</view>
						<!-- 10.13 非拼团价 10.28 注释 -->
						<!-- <view class="app-block app-market" style="color: #FA5151;">
							<text class="text">
								 省多少钱 ￥
							</text>{{item.cost_price}}
						</view> -->
						<!-- 10.28 修改 -->
						<view class="app-block app-full">
							<text class="text">
							邀请朋友买
							</text>
						</view>
					</view>
				</view>

				<view class="app-price" v-else>
					<text class="app-font" :class="theme+ '-m-text ' + theme">定金</text><text
						class="app-price-symbol app-font"
						:class="theme+ '-m-text ' + theme">{{groups[0].attr[0].price}}</text>
					<!-- 10.25 给全款添加中划线 -->
					<text class="app-font app-non-member-price" style="margin-left: 8rpx;">全款</text><text
						class="app-price-symbol app-font app-non-member-price" :class="theme+ '-m-text ' + theme"
						style="text-decoration: line-through;">{{groups[0].attr[0].original_price}}</text>
					<!-- 10.13 -->
					<!-- <text class="app-font app-non-member-price"
						style="margin-left: 8rpx;text-decoration: line-through;font-size: 24rpx;">非拼团价</text> -->
					<text class="app-font app-non-member-price"
						style="margin-left: 8rpx;text-decoration: line-through;font-size: 24rpx;">省多少钱</text>
					<text class="app-price-symbol app-font app-non-member-price"
						style="text-decoration: line-through;font-size: 24rpx;"
						:class="theme+ '-m-text ' + theme">{{groups[0].attr[0].cost_price}}</text>
				</view>

				<!-- <view v-else-if="level_show === 1" class="app-level dir-left-nowrap cross-center">
					<text class="app-price-symbol app-font app-member-price" :class="theme+ '-m-text ' + theme">
						{{groups[0].member_price_min}}
					</text>
					<text class="app-icon" :class="theme+ '-m-text ' + theme">会员价</text>
					<app-sup-vip :is_vip_card_user="is_vip_card_user" margin="10rpx 0 0 11rpx" v-if="discount"
						:discount="discount"></app-sup-vip>
				</view> -->
				<view class="app-bottom dir-left-wrap cross-center">
					<!-- <text class="app-price-symbol app-original-price" :class="theme+ '-m-text ' + theme"
						v-if="level_show === 1">{{original_price}}</text> -->
					<!-- 10.25 拼团换成购买 -->
					<text class="app-pt-info" :class="theme+ '-m-text ' + theme + ' ' + theme+ '-m-back-o'"
						v-for="(item, index) in groups" :key="index">{{item.groups.people_num}}人购买
						<!-- 拼团 -->
					</text>
					<!-- <text class="app-pt-info"
						:class="theme+ '-m-text ' + theme + ' ' + theme+ '-m-back-o'">拼团立省￥{{groupSparePrice}}</text> -->
				</view>
			</view>
			<view class="app-share">
				<app-form-id @click="shareShow = true">
					<image class="app-icon" src="../../../static/image/icon/icon-share.png"></image>
					<text class="app-text red">分享</text>
				</app-form-id>
			</view>
			<view>
				<app-share-qr-code :poster-config="posterConfig" :poster-generate="posterGenerate"
					:has-poster-nav="hasPosterNav" :theme="theme" v-model="shareShow" :url="share_url">
				</app-share-qr-code>
			</view>
		</view>
	</view>
</template>

<script>
	import appShareQrCode
	from '../../../components/page-component/app-share-qr-code-poster/app-share-qr-code-poster.vue';

	export default {
		name: 'app-price-title-share',
		data() {
			return {
				shareShow: false,
			}
		},
		props: {
			// 拼团组
			groups: {
				type: Array,
				default () {
					return [];
				}
			},
			// 标题
			title: {
				type: String,
				default () {
					return '';
				}
			},
			// 副标题
			subtitle: {
				type: String,
				default () {
					return '';
				}
			},
			// 是否是超级会员卡用户
			is_vip_card_user: {
				type: Number,
				default () {
					return 0;
				}
			},
			// 售价
			price_min: {
				type: String,
				default () {
					return '0.00';
				}
			},
			// 原价
			original_price: {
				type: String,
				default () {
					return '0.00';
				}
			},
			discount: {
				type: String,
				default () {
					return null;
				}
			},
			// 主题色
			theme: String,
			// 海报
			share_url: {
				type: String,
				default () {
					return '';
				}
			},
			// 是否显示会员

			level_show: {
				type: Number,
				default () {
					return 0;
				}
			},

			posterConfig: String,
			posterGenerate: String,
			hasPosterNav: {
				type: Boolean,
				default () {
					return false
				},
			},
			isabuy: Boolean
		},
		computed: {
			groupSparePrice: function() {
				// console.log(this.groups);
				if (this.groups.length > 0) {
					return (this.original_price - this.groups[0].price_min).toFixed(2);
				} else {
					return this.original_price;
				}
			}
		},
		components: {
			'app-share-qr-code': appShareQrCode,
		}
	}
</script>

<style scoped lang="scss">
	.vip-price {
		width: #{148upx};
		height: #{27upx};
		margin-left: #{13rpx};
		margin-bottom: #{10rpx};

		.item {
			height: #{27upx};
			width: 50%;
		}

		.left {
			border-top-left-radius: #{13upx};
			border-bottom-left-radius: #{13upx};
			background-color: #4e4040;
			position: relative;
		}

		.right {
			border-top-right-radius: #{13upx};
			border-bottom-right-radius: #{13upx};
			background: linear-gradient(45deg, #edc9a8, #fdebde);
			font-size: #{18upx};
			line-height: #{27upx};
			text-align: center;
			color: #4e4040;
		}

		.vip-icon {
			width: #{51upx};
			height: #{14upx};
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.app-price-title-share {
		background-color: white;
		padding: #{30rpx} #{26rpx} #{10rpx} #{26rpx};
		width: #{750rpx};

		.app-name {
			font-size: #{32rpx};
			width: #{698rpx};
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			/* -webkit-line-clamp: 2;
			overflow: hidden; */
		}

		.app-subtitle {
			margin-top: #{18rpx};
			font-size: 24rpx;
			background-color: #ffffff;
			color: #999999;
			display: block;
		}

		.app-price-content {
			width: #{698rpx};
			/* #ifndef MP-TOUTIAO */
			min-height: #{130rpx};
			/* #endif */
			/* #ifdef MP-TOUTIAO */
			min-height: #{100rpx};
			/* #endif */
			padding-top: #{20rpx};

			.app-price {
				min-height: #{136rpx};
				width: #{698-40rpx};

				.app-pname {
					margin-top: 24rpx;

					.app-tname {
						padding: 6rpx 48rpx;
						background: #DEB766;
						border-radius: 8rpx;
						line-height: 42rpx;
						color: #FFFFFF;
						font-weight: normal;
					}
				}

				.app-tprice {
					width: 100%;
					border: 2rpx solid #E0E0E0;
					padding: 10rpx 24rpx;
					border-radius: 8rpx;
					margin-top: 16rpx;
					// font-size: 32rpx;
					font-weight: bold;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					line-height: 36rpx;
					justify-content: start;

					.app-tname {
						font-weight: normal;
					}

					.app-deposit {
						// margin-left: 20rpx;
						color: #ddb766;

						text {
							font-size: 24rpx;
						}
					}

					.app-full {
						color: #EB5757;
						// margin-left: 20rpx;

						text {
							font-size: 24rpx;
						}
					}

					.app-market {
						font-size: 24rpx;
						text-decoration: line-through;
						color: #EB5757;
						// margin-left: 20rpx;
					}
				}

				.app-block {
					display: inline-block;
					// color: #FA5151;

					.text {
						color: #666666;
					}
				}

				.app-bottom {
					margin-top: #{18rpx};

					>text {
						margin-bottom: 5upx;
					}

					.app-original-price {
						font-size: #{23rpx};
						margin-right: #{10rpx};
					}

					.app-pt-info {
						display: inline-block;
						height: #{30rpx};
						line-height: #{30rpx};
						padding: 0 #{8rpx};
						margin-left: #{5rpx};
						font-size: #{20rpx};
					}
				}

				.app-price-symbol:before {
					content: '￥';
					font-size: #{20rpx};
				}

				.app-font {
					font-size: #{40rpx};
					font-weight: bold;
				}

				.app-non-member-price {
					color: #ff5c5c;
				}

				.app-icon {
					display: inline-block;
					line-height: 1;
					padding: 5rpx 0;
					width: #{65rpx};
					font-size: #{17rpx};
					text-align: center;
					background-color: #fef4e5;
					border-radius: #{6rpx};
					border: #{1rpx} solid;
					margin-left: #{11rpx};
					margin-top: #{10rpx};
					transform: rotateZ(360deg);
				}
			}

			.app-share {
				width: #{40rpx};
				height: #{136rpx};
				position: relative;

				.app-icon {
					width: #{40rpx};
					height: #{40rpx};
				}

				.app-text {
					color: #666666;
					font-size: #{20rpx};
					position: absolute;
					top: #{50rpx};
					left: 0;

					&.red {
						color: $uni-important-color-red;
					}
				}
			}
		}
	}
</style>
